<!--
 * @Author: zi.yang
 * @Date: 2020-04-21 22:05:40
 * @LastEditTime: 2020-06-22 13:26:28
 * @LastEditors: 
 * @Description: In User Settings Edit
 * @FilePath: \My-JavaScript-Study\React Study\day02\05.html
--> 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
    <script src="../babel.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      /**
      上面两个例子中，参数 e 作为 React 事件对象将会被作为第二个参数进行传递。
      通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。
      值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，例如:
    */
      class Demo extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            date: new Date(),
            onToggle: true,
            name: "hello.world",
          };
          this.onToggleClick = this.onToggleClick.bind(this);
        }
        onToggleClick() {
          this.setState((prevState) => ({ onToggle: !prevState.onToggle }));
        }
        componentDidMount() {
          setInterval(() => this.tick(), 1000);
        }
        tick() {
          this.setState({
            date: new Date(),
          });
        }
        preventPop(name, e) {
          //通过preventDefault设置默认时间
          e.preventDefault();
          console.log("test code ,debuger", e);
        }
        render() {
          return (
            <div>
              <button onClick={this.onToggleClick}>
                {this.state.onToggle ? "ON" : "OFF"}
              </button>
              {/* 通过 bind() 方法传递参数。 */}
              <a
                href="https://reactjs.org"
                onClick={this.preventPop.bind(this, this.state.name)}
              >
                Click
              </a>
              <h2>{this.state.date.toLocaleTimeString()}</h2>
            </div>
          );
        }
      }

      ReactDOM.render(<Demo />, document.getElementById("app"));
    </script>
  </body>
</html>
